<template>
  <div class="name_container">
    <div>计算属性,全名1: {{ fullName }}</div>
    <div>计算属性,全名2: {{ fullName }}</div>
    <div>计算属性,全名3: {{ fullName }}</div>
    <div>属性方法,全名1: {{ getFullName() }}</div>
    <div>属性方法,全名2: {{ getFullName() }}</div>
    <div>属性方法,全名3: {{ getFullName() }}</div>
    <input type="text" v-model="firstName"/>
    <input type="text" v-model="lastName"/>

  </div>
</template>
<script setup>
  import { computed, ref } from 'vue';
  let firstName = ref("Tom")
  let lastName = ref("Wilson")

  // 基于现有的数据做加工处理，而且有缓存机制
  // const fullName = computed(()=>{
  //   console.log("compouted is called")
  //   return firstName.value + "-" + lastName.value
  // })
  
  // 匿名函数
  const fullName = computed(function() {
    console.log('computed is called')
    return firstName.value.toUpperCase() + "-" + lastName.value
  })
  // 普通方法，没有有缓存机制
  function getFullName() {
    console.log('method is called')
    return  firstName.value + "-" + lastName.value
  }


</script>

<style scoped>

.name_container {
  display: flex;
  flex-direction: column;
}
.content, .textarea {
  margin-top: 20px;
  width: 50%;
}
.gender_container {
  margin-top: 20px;
}

input {
  width: 50%;
  margin-top: 20px;
}


</style>